<template>
  <r-pop
    class="edit"
    title="编写基本信息"
    width="500px"
    height="150px"
    @confirm="onSave"
    v-bind="$attrs"
  >
    <div class="edit__base">
      <div class="edit__base__item" :key="item.id" v-for="item in baseItems">
        <span>{{ item.name }}</span>
        <input
          class="input-line"
          :placeholder="item.placeholder"
          v-model="item.value"
        />
      </div>
    </div>
    <div @click="plusAttr" class="edit__plus">
      <i class="resume resume-plus" />
      <span>自定义字段</span>
    </div>
    <div class="edit__diy" :key="item.id" v-for="(item, index) in diyItems">
      <i class="resume resume-del" @click="delAttr(index)" />
      <input
        class="edit__diy--name"
        placeholder="字段名字"
        v-model="item.name"
      />
      <input
        class="edit__diy--value"
        placeholder="字段内容不超过20字"
        v-model="item.value"
      />
    </div>
  </r-pop>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
import RPop from "@/components/base/RPop";
import { ref, computed } from "vue";

export default {
  name: "edit",
  components: { RPop },
  props: {
    originData: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, ctx) {
    const tempData = ref(cloneDeep(props.originData));
    const baseItems = computed(() => tempData.value.slice(0, 4));
    const diyItems = computed(() => tempData.value.slice(4));
    const plusAttr = () =>
      tempData.value.push({
        id: Date.now(),
        type: "diy",
        name: "",
        value: "",
      });
    const delAttr = (index) => tempData.value.splice(index, 1);
    const onSave = () => ctx.emit("save", tempData.value);
    return {
      baseItems,
      diyItems,
      plusAttr,
      delAttr,
      onSave,
    };
  },
};
</script>

<style scoped lang="less">
.edit {
  &__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &__item {
      width: 220px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:nth-child(n + 2) {
        margin-bottom: 5px;
      }
    }
  }
  &__plus {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    i {
      color: lightskyblue;
    }
  }

  &__diy {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    .resume-del {
      position: absolute;
      right: -6px;
      top: -6px;
      font-size: 12px;
      display: none;
    }
    &:hover {
      .resume-del {
        display: block;
      }
    }

    &--name {
      width: 150px;
      margin-right: 20px;
    }

    &--value {
      flex: 1;
    }
  }
}
</style>
